<template>
    <div>
    <van-tabs v-model="active">
        <van-tab title="主页">
            <ul class="mysong">
                <li @click="changeUrl">
                    <div class="mysong-img">
                        <img src="../assets/img/live.webp" alt="">

                        <div>
                            <span>收藏列表</span><br>
                            <span>累计收藏{{listLength}}条</span>
                        </div>
                    </div>
                </li>


            </ul>

            <div class="myInfo">
                <h2>基本信息</h2>
                <div>
                    <p><span class="p1">用户名：</span><span>{{userInfo.userName}}</span></p>
                    <p><span class="p1">手机号：</span><span>{{userInfo.phonenumber}}</span></p>
                    <p><span class="p1">个人邮箱：</span><span>{{userInfo.email}}</span></p>

                    <p><span class="p1">个人说明：</span><span>{{userInfo.remark}}</span></p>
                </div>
            </div>
            <van-button color="#999999" style="border-radius: 5px; opacity: 0.5;" @click="loginOut">退出登录</van-button>
        </van-tab>

    </van-tabs>
    </div>
</template>

<script>
    import {getusertInfo, getloginout, getCollectList} from "../api/api";

    export default {
        name: "userInfo1",
        data(){
            return{
                active:0,
                userInfo:[],
                listLength:'0'
            }
        },
        methods:{
            changeUrl(){
                this.$router.push('/userInfo/collect')
            },
            loginOut(){
                getloginout().then(res=>{
                    // console.log(res);
                    this.$toast(res.msg);
                    this.$store.commit("login/changeIsLogin",false);
                    this.$router.push('/login');
                })
            }
        },
        created() {
            this.imgUrl = localStorage.getItem("img") || "http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg";
            getusertInfo().then(res=>
            {
                // console.log(res)
                if(res.code==0){

                    this.userInfo = res.data;

                }else {
                    this.$toast("错误")
                }
            })
            getCollectList().then(res => {
                // console.log(res)
                this.listLength = res.rows.length
                // console.log(this.hotList)
                this.looo = false
            })

        },
    }
</script>

<style lang="less" scoped>

    .new-do{
        text-align: center;
        color: #cccccc;
        margin-top: 30px;
    }
    .mysong{
        margin-top: 20px;
        li{
            padding: 10px 20px;
            .mysong-img{
                display: flex;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 50px;
                    height: 50px;
                }
                div{
                    width: calc(100% - 60px);
                }
                div span:nth-of-type(2){
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
    }
    .myInfo{
        margin: 15% 5%;
        text-align: left;
        font-size: 14px;
        color: #999999;

        h2{
            font-size: 18px;
            margin-bottom: 10px;
            color: black;
        }

        p{
            margin-bottom: 5px;
        }
        .p1{
            text-align: center;
            display: inline-block;
            width: 80px;
        }
    }
</style>